<template>
  <view class="class-detail d-flex flex-column">
    <view class="top flex-between">
      <view class="d-flex justify-space-between align-start flex-column">
        <u-tag
          text="暑假游泳课程"
          bgColor="#fff"
          color="#ffa400"
          borderColor="rgba(0,0,0,0)"
          shape="circle"
        ></u-tag>
        <view class="text flex-align" style="margin-top: 30rpx">
          <view class="it flex-align">
            <u-icon name="clock" color="#fff"></u-icon>
            2021/7/30-8/30
          </view>
          <view class="it flex-align">
            <u-icon name="map-fill" color="#fff"></u-icon>
            大连体育馆第一泳池
          </view>
        </view>
      </view>

      <cCircle
        :size="75"
        :percent="60"
        animation
        circleColor="#ffa400"
        :circleWidth="8"
        :direction="180"
        defaultColor="#ddd"
      >
        <view
          slot="content"
          class="flex-center"
          style="
            height: 100%;
            width: 100%;
            border-radius: 50%;
            background-color: #fff;
            color: #ffa400;
          "
          >15/20课</view
        >
      </cCircle>
    </view>

    <u-sticky>
      <u-tabs
        :list="tabsList"
        lineColor="#4786fe"
        :activeStyle="{
          color: '#2f75fa',
        }"
        :inactiveStyle="{
          color: '#353535',
        }"
        :lineWidth="30"
        :current="currentTab"
        @click="onClickTab"
      />
    </u-sticky>

    <!-- 课时 -->
    <schedule v-show="currentTab === 0" :list="list" />

    <!-- 服务 -->
    <service v-show="currentTab === 1" />

    <!-- 记录 -->
    <record v-show="currentTab === 2" class="d-flex flex-grow-1" />
  </view>
</template>

<script>
import schedule from "./schedule";
import service from "./service";
import record from "./record";
const index = require("@/api/personal/index.js");
export default {
  components: {
    schedule,
    service,
    record,
  },
  data() {
    return {
      currentTab: 0,
      tabsList: [{ name: "课时" }, { name: "服务" }, { name: "记录" }],
      list: [
       
      ],
    };
  },
  onLoad({ title, id }) {
    console.log(id);
    uni.setNavigationBarTitle({
      title,
    });
	this.getClassList(id)
  },
  methods: {
    onClickTab({ index }) {
      this.currentTab = index;
    },
	// 获取课节
	async getClassList(train_id){
		let postData = {
			train_id: train_id,
			app_id: this.$https.weixinAppId,
			project_id: getApp().globalData.projectId,
		}
			let res = await index.getClassList(postData)
		if(res.code === 1){
			this.list = res.data.courseData
		}
	}
  },
};
</script>

<style lang="scss" scoped>
.class-detail {
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);

  .top {
    background-color: #6b65f6;
    padding: 20rpx;
    color: #fff;

    .text {
      font-size: 24rpx;

      .it {
        & + .it {
          margin-left: 30rpx;
        }
      }
    }
  }

  /deep/.u-tabs {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 30rpx 30rpx 0 0;

    .u-tabs__wrapper__nav__item {
      flex: 1;
    }

    .u-tabs__wrapper__nav__line {
      bottom: 0;
    }
  }
}
</style>
